var content = view.appendElement("<div x=\"0\" y=\"0\" height=\"100%\" width=\"100%\"></div>");

function view_onOpen() {
    detailsViewData.putValue("confirmed", false);
    new drawScreen();
}

function Header(screen, height, colorBackground, text) {
    var aux = Math.floor( (height - 20) / 2);
    this.shadow = screen.appendElement("<div x=\"0\" y=\"0\" height=\""+height+"\" width=\"100%\" background=\""+colorBackground+"\"></div>");
    this.label = this.shadow.appendElement("<label x=\"17\" y=\""+aux+"\" width=\"100%\" height=\""+(height-2)+"\" vAlign=\"middle\" bold=\"true\" color=\"#0071BC\">"+text+"</label>");
		this.bolinha = screen.appendElement("<div x=\"8\" y=\""+8+"\" width=\"6\" height=\"6\"  background=\"resources\\container\\bolinhaDosTitulos.png\"></div>");
}

function Label(screen, colorPostIt,  x, y, width, height, text) {
		src = "resources\\postIt\\layout_" +colorPostIt+"\\";
		this.postIt = screen.appendElement("<div x=\""+x+"\" y=\""+y+"\" width=\"9\" height=\""+height+"\" background=\""+src+"postItCantoEsquerdo.png\"></div>");
		this.postIt2 = screen.appendElement("<div x=\""+(x+width+9)+"\" y=\""+y+"\" width=\"9\" height=\""+height+"\" background=\""+src+"postItCantoDireito.png\"></div>");
		this.postIt3 = screen.appendElement("<div x=\""+(x+9)+"\" y=\""+y+"\" width=\""+width+"\" height=\""+height+"\" background=\""+src+"postItBarra.png\"></div>");
    this.label = screen.appendElement("<label x=\""+(x+6)+"\" y=\""+(y+2)+"\" color=\"#FFFFFF\" width=\""+width+"\" height=\""+height+"\">"+text+"</label>");
};

function BorderEdit(screen, x, y, width, height, colorBorder, colorOver) {
    var self = this;
    this.border = screen.appendElement("<div x=\""+x+"\" y=\""+y+"\" height=\""+height+"\" width=\""+width+"\" background=\""+colorBorder+"\"></div>");
    this.edit = this.border.appendElement("<edit x=\""+1+"\" y=\""+1+"\" height=\""+(height-2)+"\" width=\""+(width-2)+"\" wordwrap=\"true\" multiline=\"false\" />");
    if (colorOver) {
        this.edit.enabled = true;
        this.edit.onfocusin = function() {
            self.border.background = colorOver;
        };
        this.edit.onmouseover = function() {
            self.border.background = colorOver;
        };
        this.edit.onmouseout = function() {
            self.border.background = colorBorder;
        };
        this.edit.onfocusout = function() {
            self.border.background = colorBorder;
        };
    }
}
function Button(screen, x, y, text, onClick) {
    var self = this;
    this.button = screen.appendElement("<div enabled=\"true\" height=\"22\" width=\"83\" x=\""+x+"\" y=\""+y+"\" background=\"resources/preferences/buttons/shortButton.png\"><label height=\"22\" width=\"83\" x=\"0\" y=\"0\" align=\"center\" valign=\"middle\">"+text+"</label></div>");
    if (onClick) {
        this.button.onmouseup = function() { self.button.background = "resources/preferences/buttons/shortButton.png"; }
        this.button.onmousedown = function() { self.button.background = "resources/preferences/buttons/shortButtonApertado.png"; }
        this.button.onclick = function() {
            onClick();
        }
    }
}

function drawScreen() {
    content.background = "#FFFFFF";
    var self = this;
    this.headerLabel = new Header( content, 22, "resources/container/barraDeTitulo.png", DETAILS_LOGIN );
    this.loginLabel = new Label( content, "blue", 10,30,150,20,DETAILS_USERNAME);
    this.login = new BorderEdit( content, 10, 49, 168, 30, "#c7cbce", "#0071bc" );
    this.passLabel = new Label( content, "green", 9, 85, 152, 20, DETAILS_PASSWORD );
    this.pass = new BorderEdit( content, 10, 104, 168, 30, "#c7cbce", "#67ff95" );
    this.pass.edit.passwordChar = "*";
    this.sendData = function() {
        detailsViewData.putValue("username", self.login.edit.value);
        detailsViewData.putValue("password", self.pass.edit.value);
        detailsViewData.putValue("confirmed", true);
        
        plugin.closeDetailsView();
    };
    this.confirm = new Button(content, 90, 140, "Ok", self.sendData);
}
